簡介

本系列內容將會提及D3Js和資料相關內容的知識，主題訂定為資料駕馭網頁，其實一部分原因來自D3Js原始英文來自於Data-Driven Documents，其中documents也是網頁中的物件，因此我將它命名成資料駕馭網頁也更好理解，預計不定時會補充官方API文件和網頁相關知識，文中能以step by step方式，期望讓Javascript和處理資料的初學者能夠理解。

什麼是資料視覺化(Data visualizatio)

資料視覺化是一個透過圖表來說明資訊和資料的過程。換句話說可以觀察與了解在資料中的走向。
簡單的說法就是資料空間到圖形空間的映射，另個說法就是對於每筆資料可以對應到圖形上的某個地方。

為什麼需要資料視覺化

視覺的效率

人類使用視覺獲取的資訊量遠遠超過其他器官，另外圖形的呈現可以加速了解資料的效率。

至少有80%以上的外界信息經視覺獲得，視覺是人和動物最重要的感覺。　引述：維基百科—視覺
參見維基百科 — 視覺

安斯庫姆四重奏（Anscombe's quartet）

由於單看數據的時候可能會出現盲點，統計學家提弗朗西斯·安斯庫姆（Francis Anscombe）面對擁有多個共同的統計特性當繪製圖表的時候卻產生不同的樣貌。

如下圖

參見維基百科 — 安斯庫姆四重奏

科學與美學的結合

在資料視覺化中我們可以說資料來自於現實生活中的數據或是實驗研究所產生的數值，例如一個班級學生的身高與體重，氣象局觀測的氣溫與濕度。
當我們為了繪製出方便人們理解的圖表的時候必須也兼顧一些美學，我們並不會使用背景白色，字體或者圖形也是淡色系的方式來呈現，它會增加閱讀的難易度，另外過於相似的顏色也造成判讀錯誤的可能性。

資料的表達

常見的資料視覺化方式可以使用位置、形狀、大小、顏色、線條粗細、線條類型來呈現。

順帶一提以上內容是我用css的div繪製，未來會講到的D3Js某些部分也是需要手動繪製，雖然並非以div繪製為主軸，但有興趣的人可以前往我的codepen觀看。
使用css繪製圖形

小總結

資料視覺化能幫助我們快速了解資訊重點，製作簡報和說故事的時候能更快速的使人們知道資訊的含意，並且必須考量到一些美學設計，讓人們清楚了解各項資訊的差異。下一篇將會帶入常見的資料視覺化工具介紹。